<!-- 工单池编辑表单 -->
<template>
  <q-card style="width: 400px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <q-input v-model="dto.orderNo" label="工单编号" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model.number="dto.orderType" label="工单类型" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model="dto.description" label="工单描述" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model.number="dto.orderStatus" label="工单状态" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model="dto.submitPerson" label="提交人" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model="dto.submitTel" label="提交人电话" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model.number="dto.submitAreaId" label="小区ID" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model.number="dto.submitRoomId" label="提交人房号" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model="dto.submitAddr" label="提交人地址" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model.number="dto.submitTime" label="提交时间" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model.number="dto.rateStars" label="评价星级" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model="dto.rateContent" label="评价内容" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model.number="dto.handleUser" label="工单处理人账号" :rules="[required]" class="col-12 col-sm-6"  type="number"  />
        <q-input v-model="dto.handleUserName" label="工单处理人姓名" :rules="[required]" class="col-12 col-sm-6"   />
        <q-input v-model="dto.handleResult" label="处理结果" :rules="[required]" class="col-12 col-sm-6"   />
      </q-form>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions v-if="!readonly">
      <q-checkbox v-model="closeAfterSave" label="保存后关闭" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :loading="loading" @click="handleSubmit">保存</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { required } from 'src/utils/validator';
  import { useCrudForm } from 'src/composables';

  import crudApi, { WorkOrderDto } from 'src/api/workorder/workorder';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '工单池表单' },
    readonly: { type: Boolean, default: false },
  });
  const emit = defineEmits(['close', 'after-save']);

  // 表单数据
  const initWorkOrder = {} as WorkOrderDto;
  const { formRef, dto, closeAfterSave, loading, handleSubmit } = useCrudForm<WorkOrderDto>(crudApi, initWorkOrder, props, emit);
</script>

<style lang="scss" scoped></style>
